import React, { useState } from 'react';
import { Dialog } from '@headlessui/react';
import { X } from 'lucide-react';

interface UploadModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  onUpload: (file: File, kbId?: number, description?: string) => void;
  showKbId?: boolean;
  showDescription?: boolean;
}

const UploadModal: React.FC<UploadModalProps> = ({
  isOpen,
  onClose,
  title,
  onUpload,
  showKbId = false,
  showDescription = false,
}) => {
  const [file, setFile] = useState<File | null>(null);
  const [kbId, setKbId] = useState<number>(2978);
  const [description, setDescription] = useState<string>('');

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFile(e.target.files[0]);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (file) {
      onUpload(file, kbId, description);
      setFile(null);
      setKbId(2978);
      setDescription('');
    }
  };

  return (
    <Dialog
      open={isOpen}
      onClose={onClose}
      className="relative z-50"
    >
      <div className="fixed inset-0 bg-ink/20 backdrop-blur-sm" aria-hidden="true" />
      
      <div className="fixed inset-0 flex items-center justify-center p-4">
        <Dialog.Panel 
          className="mx-auto max-w-md rounded-lg bg-paper p-6 shadow-deep animate-float-in"
        >
          <div className="flex justify-between items-center mb-6 border-b border-ink/10 pb-4">
            <Dialog.Title className="text-subtitle font-montserrat text-ink">{title}</Dialog.Title>
            <button
              onClick={onClose}
              className="w-8 h-8 rounded-full flex items-center justify-center text-ink/70 hover:bg-ink/5 transition-colors duration-200"
            >
              <X size={18} />
            </button>
          </div>
          
          <form onSubmit={handleSubmit}>
            <div className="mb-5">
              <label className="block text-body font-inter text-ink mb-2">
                选择文件
              </label>
              <div className="relative">
                <input
                  type="file"
                  onChange={handleFileChange}
                  className="w-full px-4 py-3 bg-paper border border-ink/10 rounded-lg font-inter text-ink text-body focus:ring-2 focus:ring-ink-blue/20 focus:border-ink-blue/30 transition-all duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-inter file:bg-ink-blue file:text-paper hover:file:bg-ink-blue/90"
                  required
                />
              </div>
            </div>
            
            {showKbId && (
              <div className="mb-5">
                <label className="block text-body font-inter text-ink mb-2">
                  知识库ID
                </label>
                <input
                  type="number"
                  value={kbId}
                  onChange={(e) => setKbId(Number(e.target.value))}
                  className="w-full px-4 py-3 bg-paper border border-ink/10 rounded-lg font-inter text-ink text-body focus:ring-2 focus:ring-ink-blue/20 focus:border-ink-blue/30 transition-all duration-200"
                  required
                />
              </div>
            )}
            
            {showDescription && (
              <div className="mb-5">
                <label className="block text-body font-inter text-ink mb-2">
                  描述
                </label>
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  className="w-full px-4 py-3 bg-paper border border-ink/10 rounded-lg font-inter text-ink text-body focus:ring-2 focus:ring-ink-blue/20 focus:border-ink-blue/30 transition-all duration-200 resize-none"
                  rows={3}
                />
              </div>
            )}
            
            <div className="flex justify-end space-x-4 mt-8">
              <button
                type="button"
                onClick={onClose}
                className="px-5 py-2 bg-paper text-ink rounded-lg hover:bg-ink/5 transition-colors duration-200 font-inter text-body"
              >
                取消
              </button>
              <button
                type="submit"
                className="px-5 py-2 bg-ink-blue text-paper rounded-lg font-inter text-body flex items-center hover:bg-ink-blue/90 transition-colors duration-200 disabled:opacity-50"
                disabled={!file}
              >
                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0l-4 4m4-4v12" />
                </svg>
                上传
              </button>
            </div>
          </form>
        </Dialog.Panel>
      </div>
    </Dialog>
  );
};

export default UploadModal;
